<template>
  <el-dialog
    :title="`选择${userTypeList.find((item) => item.value === userType).label}`"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="1200px"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="手机号" prop="principalPhone">
        <el-input
          v-model.trim="queryParams.principalPhone"
          placeholder="请输入手机号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="名称" prop="userName">
        <el-input
          v-model.trim="queryParams.userName"
          placeholder="请输入名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="nameList"
      ref="multipleTable"
      @select="handleSelect"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column
        label="ID"
        align="center"
        key="userInfoId"
        prop="userInfoId"
      />
      <el-table-column
        label="姓名"
        align="center"
        key="principalName"
        prop="principalName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="身份证号码"
        align="center"
        v-if="isShowType"
        key="idNumber"
        prop="idNumber"
      />
      <el-table-column
        label="手机号码"
        align="center"
        v-if="isShowType"
        key="principalPhone"
        prop="principalPhone"
      />
      <el-table-column
        label="类型"
        v-if="isShowType"
        align="center"
        key="userType"
        prop="userType"
      >
        <template slot-scope="scope">
          <span>
            {{
              userTypeList.find((item) => item.value === scope.row.userType)
                .label
            }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listInfo } from "@/api/system/info";
import { userTypeList } from "@/configEnum";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    userType: {
      type: Number,
      default: 1,
    },
    userInfoId: {
      type: Number,
      default: 0,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    userList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      userTypeList,
      loading: false,
      queryParams: {
        principalPhone: undefined,
        userName: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      nameList: [],
      multipleSelection: [],
      rowData: []
    };
  },
  methods: {
    handleSelect(selection, row) {
      if (this.multiple) {
        return;
      }
      this.rowData = row;
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    handleSubmit() {
      if (this.multiple) {
        this.$emit("onSubmit", this.multipleSelection);
        this.handleClose();
        return 
      }
      // 单选模式下 需要判断是否已经选择过司机
      if(this.rowData.length === 0) return this.$message.warning('请先选择司机')
      this.$emit("onSubmit", this.rowData?.userInfoId,this.rowData?.principalName, this.rowData);
      this.handleClose();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleClose() {
      this.$emit("onClose");
    },
    handleQuery() {
      this.getList();
    },
    getList() {
      this.loading = true;
      const { principalPhone, userName, pageNum, pageSize } = this.queryParams;
      listInfo({
        userType: this.userType,
        principalPhone,
        principalName: userName,
        pageNum,
        pageSize,
        selectType: "account",
      }).then((res) => {
        this.nameList = res.rows;
        this.total = res.total;
        this.loading = false;
        if (this.userList.length > 0) {
          this.$nextTick(() => {
            this.userList.forEach((item) => {
              this.$refs.multipleTable.toggleRowSelection(
                this.nameList.find((s) => s.userInfoId === item.userInfoId),
                true
              );
            });
          });
        }
      });
      // this.nameList = [
      //   {
      //     userId: 1,
      //     userName: "张三",
      //     identityNumber: 1313131313,
      //     phonenumber: 13131313,
      //     userType: "员工",
      //   },
      // ];
    },
  },
  computed: {
    isShowType() {
      return this.userType === 2;
    },
  },
  // created() {
  //   this.getList();
  // },
  watch: {
    dialogVisible(newValue, oldValue) {
      if (newValue) {
        // this.multipleSelection = [];
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
